<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style type="text/css">
            #div1 {
                width: 100px;
                height: 100px;
                /*background-color: red;*/
                border-style: solid;
                border-color: red;
                border-width: 1px;
                /*margin-bottom: 20px;*/
                /*margin-top: 20px;*/
                /*margin-left: 20px;*/
                /*margin-right: 20px;*/
                /*
                margin :40px 代表上下左右都是 40
                如果是两个大小 分别代表上下和左右
                写三个代表 上左右下
                写四个是 上左下右(逆时针)
                */
                margin: 40px 20px 10px 10px;
                /*
                padding 叫内边距,是盒子内部的东西和盒子边框的位置
                padding 会导致盒子变大,就和你胖了一样
                */
                /*padding-top: 20px;*/
                /*padding-bottom: 20px;*/
                /*padding-left: 20px;*/
                /*padding-right: 20px;*/
                /*padding: 20px;*/
                /*padding:  20px 10px;*/
            }



            #div2 {
                width: 100px;
                height: 100px;
                /*background-color: yellow;*/
                border: blue solid 1px;
                /*
                我们设置了上边距是 40 ,上面的盒子设置下边距是 20 会出现冲突,以大的为准
                 */
                /*margin-top: 40px;*/

            }

    </style>
</head>
<body>


<div id="div1">
    这是 div1
</div>


<div id="div2">
    这不是小咸菜,这是小龙虾
</div>
</body>
</html>